import { Link, Route, RouteComponentProps,Redirect } from 'react-router-dom'
import { FC } from 'react'
import Playlist from '../Playlist'
import Toplist from '../Toplist'
import qr from 'query-string'
// 嵌套路由存在的问题：1级路由如果路径发生变化，2级路由的路径要是写死的，那么就容易让嵌套路由不能匹配
const Discover:FC<RouteComponentProps<any,any,any>> = (props) => {
    console.log(props);
    let { match:{path },location } = props
    console.log(location);
    let query = qr.parse(location.search)
    console.log(query);
    
    return(
        <fieldset>
            <legend>发现</legend>
            <ul>
                <li>
                    <Link to={`${path}/playlist`}>歌单</Link>
                </li>
                <li> 
                    <Link to={`${path}/toplist`}>风云榜</Link>
                </li>
                {/* 重定向Redirect */}
                <Redirect to={`${path}/toplist`} from={path}/>
                <Route path={`${path}/playlist`} component={Playlist}></Route>
                <Route path={`${path}/toplist`} component={Toplist}></Route>
            </ul>
        </fieldset>
    )
}
export default Discover